<template>
  <div>
    <el-button type="info" @click="personnel()" size="mini">人员名单</el-button>
    <div id="mapContainer" class="map"></div>
    <el-dialog :visible.sync="dialogVisible3">
      {{ this.value2 }}
    </el-dialog>
    <div id="ip">

      <el-dialog title="人员名单" :visible.sync="dialogVisible" width="70%">

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="设备编号">
            <el-select v-model="formInline.bh" placeholder="请选择" clearable>
              <el-option label="KF2022A" value="KF2022A"></el-option>
              <el-option label="KF2022B" value="KF2022B"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="证件号码">
            <el-input v-model="formInline.cert" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="findPage()">查询</el-button>
            <el-button type="primary" @click="qingkong">清空</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData">


          <el-table-column property="id" label="序号"></el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
          <el-table-column property="sid" label="绑定设备"></el-table-column>
          <el-table-column property="cert" label="证件号码"></el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="zuji(scope.row.id)" size="mini">足迹查询</el-button>
              <el-button type="text" @click="Tofwgl(scope.row.id)" size="mini">健康档案</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页展示数据-->
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-dialog>

    </div>

    <div id="ipp">
      <el-dialog :visible.sync="dialogVisible1">


        <h1>查询时段</h1>
        <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd hh:mm:ss">
        </el-date-picker>


        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible()">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <!--    <button @click="showPolygon">时间查询</button>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      latitude: [],
      longitude: [],
      locationInfo: '',
      map: null,
      polygon: null,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible3: false,
      formInline: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      polygonPath: [
        // [116.39, 39.9],
        // [116.4, 39.91],
        // [116.41, 39.9],
        // [116.4, 39.89],
        // [116.39, 39.9]
      ]
    };


  },
  mounted() {
    this.initMap();
  },
  created() {
    this.findPage();
  },
  methods: {

    personnel() { //往添加对话框里清空数据
      this.dialogVisible = true;
    },
    dialogFormVisible() {
      this.showPolygon();
      this.dialogVisible1 = false;
      this.dialogVisible = false;
      this.dialogVisible3 = true;
    },
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:9007/zjgl/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },

    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    qingkong() {
      this.formInline = {};
      this.findPage();
    },
    Tofwgl(id) {

      this.$router.push({
        path: '/jkgl1',
        query: {
          id: id,
        }
      })
    },
    zuji(id) { //往添加对话框里清空数据
      this.polygonPath=[]
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == id) {
          var aa = this.tableData[i].longitude.split(",");
          var bb = this.tableData[i].latitude.split(",");
          for (let jj = 0; jj < aa.length; jj++) {
            for (let j = 0; j < aa.length; j++) {
              for (let k = 0; k < bb.length; k++) {
                var a=aa[jj];
                var b=bb[jj];
                var cc=[a,b];
                this.polygonPath.push(cc);
                console.log(this.polygonPath)
                break
              }
              break
            }
          }
          break
        }
      }

      this.dialogVisible1 = true;
      this.value2 = '';
    },
    initMap() {
      this.map = new AMap.Map('mapContainer', {
        zoom: 10,
        center: [116.39, 39.9]
      });
    },
    showPolygon() {
      if (this.polygon) {
        this.map.remove(this.polygon);
      }
      this.polygon = new AMap.Polygon({
        path: this.polygonPath,
        // path: this.longitude+this.latitude,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.9,
        fillOpacity: 0.3,
        fillColor: '#1791fc',
        zIndex: 50
      });
      this.map.add(this.polygon);
      this.map.setFitView([this.polygon]);
    }
  }
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 500px;
}
</style>
